<template>
	<view class="main">

		<view class="jx">
			<view class="title1">请输入宝宝昵称</view>
			<view class="input1">
				<view class="circle">
					<image src="../../static/照相机.png" style="height: 25px;width: 25px;opacity: 0.5;margin-left: 13px;margin-top: 10px;" @click="photo()"></image>
				</view>
				<input type="text" placeholder="输入宝宝昵称,2-10个字符" style="font-size: 14px;border: none;border-bottom: 1px solid #ccc;width: 190px;margin-left: 20px;margin-top: 30px;"/>
			</view>
			<view class="input2">
				<view class="title2">请选择宝宝出生日期</view>
				<view style="margin-top: 30px;height: 80%;">
					<!-- <select style="border:solid 1px gainsboro;border-radius: 40px;height: 50px;width: 260px;margin-top: 20px;margin-left: 30px;"> -->
						<image src="../../static/下拉箭头.png" style="width: 30px;height: 30px;margin-left: 220px;margin-top: 10px;"></image>
						<!-- <option style="opacity: 0.5;font-size: 15px;margin-top: -30px;margin-left: 20px;">请选择宝宝生日</option> -->
						<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
							<view style="width:220px;border:1px solid gainsboro;border-radius: 15px;padding: 10px;margin-left: 30px;margin-top: -40px;">
								{{ multiArray[0][multiIndex[0]] }}，
								{{ multiArray[1][multiIndex[1]] }}，
								{{ multiArray[2][multiIndex[2]] }}
							</view>
						</picker>
					<!-- </select> -->
				</view>
				<button class="button">确定</button>
			</view>
			<button class="button" @tap="yes()">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				multiArray: [
					['2018年', '2019年'],
					['6月', '7月', '8月'],
					['1日', '2日']
				],
				multiIndex: [0, 0, 0]
			}

		},
		methods: {
			photo(id) {
				uni.showActionSheet({
					itemList: ['拍照', '相册'],
					itemColor: "blue"
				})
			},
			yes() {
				// uni.navigateTo({
				// 	url:'/pages/baby/baby',
				// }),
				uni.showToast({
					title: '添加宝宝信息成功',
					icon: 'none',
					duration: 1000
				});
				setTimeout(() => {
					uni.redirectTo({
						url: "/pages/baby/baby"
					})
				}, 1500)
			}
		}

	}
</script>

<style>
	.main{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		align-items: center;	
	}
	
	.jx{
		width: 90%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* align-items: center;	 */
	}

	.title1 {
		width: 100%;
		margin-left: 30px;
		margin-top: 30px;
	}

	.title2 {
		margin-left: 30px;
		margin-top: 40px;
	}

	.circle {
		width: 50px;
		height: 50px;
		background-color: gainsboro;
		border-radius: 50%;
		margin-top: 20px;
		margin-left: 27px;
		box-shadow: 0 0 5px 5px #fff;
	}

	.input1 {
		width: 100%;
		display: flex;
		flex-direction: row;
		/* justify-content: center; */
		align-items: flex-start;
	}

	.input2{
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}

	.button {
		width: 90%;
		background-color: #666ee8;
		border-radius: 10px;
		margin-top: 280px;
		color: white;
	}

	.button{
		width: 100%;
		height: 40px;
		background-color: #666ee8;
		color: white;
		margin-top: 300px;
		border-radius: 25px;
		margin-left: 30px;
	}
</style>
